<template>
  <div>
    <AModal
      v-bind="$attrs"
      @close="modalEvent('close')"
      @ok="modalEvent('ok')"
      @open="modalEvent('open')"
      @cancel="modalEvent('cancel')"
    >
      <AForm ref="formRef" :model="form" auto-label-width>
        <AFormItem
          field="productName"
          label="产品名称"
          :rules="[{ required: true, message: '请输入产品名称' }]"
          :validate-trigger="['change', 'input', 'blur']"
        >
          <AInput v-model="form.productName" placeholder="请输入产品名称" />
        </AFormItem>
        <AFormItem field="specModel" label="规格型号">
          <AInput v-model="form.specModel" placeholder="请输入规格型号" />
        </AFormItem>
        <AFormItem field="productCategory" label="类型">
          <AInput v-model="form.productCategory" placeholder="请输入类型" />
        </AFormItem>
        <AFormItem field="unit" label="单位">
          <AInput v-model="form.unit" placeholder="请输入单位" />
        </AFormItem>
        <AFormItem field="materialCode" label="材质代码">
          <AInput v-model="form.materialCode" placeholder="请输入材质代码" />
        </AFormItem>
        <AFormItem field="materialDesc" label="材质名称">
          <AInput v-model="form.materialDesc" placeholder="请输入材质名称" />
        </AFormItem>
        <AFormItem field="fluteType" label="楞型">
          <AInput v-model="form.fluteType" placeholder="请输入楞型" />
        </AFormItem>
        <AFormItem field="crimpLine" label="压线">
          <AInput v-model="form.crimpLine" placeholder="请输入压线" />
        </AFormItem>
        <AFormItem field="remark" label="备注">
          <ATextarea v-model="form.remark" placeholder="备注"></ATextarea>
        </AFormItem>
      </AForm>
    </AModal>
  </div>
</template>

<script lang="ts" setup>
import { Message } from '@arco-design/web-vue'
import { CustomerResItem, getCustomerAllList } from '@renderer/api/company'
import { editProduct, ProductReq, ProductResItem } from '@renderer/api/salesDep'
import { useMenuState } from '@renderer/store'
import { deleteNullObject } from '@renderer/utils/data-processing'

interface Props {
  [key: string]: any
  checkData?: Partial<ProductResItem>
}
const props = withDefaults(defineProps<Props>(), {
  checkData: () => {
    return {}
  }
})
const emit = defineEmits(['update:visible', 'reload'])
const attrs = useAttrs()
const formRef = ref()
const form = ref<ProductReq>({
  productName: '',
  productCategory: '',
  specModel: '',
  unit: '',
  materialName: '',
  spec: '',
  materialCode: '',
  materialDesc: '',
  fluteType: '',
  crimpLine: '',
  remark: '',
  customerId: '',
  productType: 1
})
const companyList = ref<CustomerResItem[]>([])
const menuParam = useMenuState()

// 获取客户列表
const getCompanyList = () => {
  getCustomerAllList({
    customerName: '',
    taxNo: '',
    contactName: ''
  }).then((res) => {
    companyList.value = res.data.list
  })
}

// 弹窗事件
const modalEvent = (type: string) => {
  switch (type) {
    case 'ok':
      formRef.value.validate((errors) => {
        console.log(errors)
        if (!errors) {
          // 新增
          if ((attrs.title as string).includes('新增')) {
            form.value.productId = undefined
          }
          form.value.productType = 3
          editProduct(deleteNullObject(form.value)).then(() => {
            Message.success((attrs.title as string).includes('新增') ? '新增成功' : '修改成功')
            modalEvent('cancel')
            emit('reload')
          })
        }
      })
      break
    case 'close':
      menuParam.switchEditStatus(false)
      formRef.value.resetFields()
      emit('update:visible', false)
      break
    case 'open':
      menuParam.switchEditStatus(true)
      getCompanyList()
      Object.assign(form.value, props.checkData)
      break
    case 'cancel':
      formRef.value.resetFields()
      menuParam.switchEditStatus(false)
      emit('update:visible', false)
      break
    default:
      break
  }
}
</script>
<style scoped></style>
